angular

2024-01-21 18:29| 来源: 网络整理| 查看: 265

angular-片段与插槽 ng-templateTemplateRef ngTemplateOutletng-container作用域片段插槽ng-content具名插槽

ng-template

ng-template是一个 Angular 元素，它永远不会直接显示出来。在渲染视图之前，Angular 会把及其内容替换为一个注释。

ng-template 是用来定义模板的，当使用ng-template定义好一个模板之后，可以用ng-container和templateOutlet指令来进行使用。

TemplateRef 实例用于表示模板对象

在指令中通过依赖注入TemplateRef可以直接拿到ng-tempalte的TemplateRef，但是在component组件中我们则需要使用viewChild

template test @ViewChild('tptest') tptest: TemplateRef; ngTemplateOutlet Hello, header! Hello, footer! ng-container

ng-container是angular的一个特殊标签，有点类似ng-template，但二者的用法不一样。最大的不同之处在于，ng-template包裹的内容无法展示出来，而ng-container却可以：

{{item.id}}---{{item.name}}

编译后发现，ng-container并创建任何节点，只是作为一个逻辑tag来使用。有时为了代码清晰明了，我们并不希望将*ngFor的逻辑放在实际的模板标签上，这时ng-container就派上了用场

作用域片段

作用域片段需要声明上下文，以便渲染代码片段的时候绑定相关字段。

hello {{name}},your age is {{ageHTML}}

let-name这种写法有点奇怪，其实就是let name="xxx"的意思,如果后面不跟具体的值，就是代表默认值。

let-ageHTML = “age”,翻译过来就是let ageHTML = “age”。

name和age两个字段，绑定的上下文context就是student，需要在ts文件声明，最终访问的是student.name和student.age。

// 父组件点击查看 // 子组件

moduleName 是传参，callDetail是组件

// 子组件中的 template 拉拉我是买包的小行家插槽ng-content

ather.component.html:

这是一个匿名插槽

child.component.html:

匿名插槽很简单，利用ng-content这个特殊tag占个坑即可搞定。

具名插槽

ng-content可以加select关键字，就是具名插槽。 father.component.html:

我是demo1 class为"demo2" name为"demo3"

这个具名插槽十分强大，子组件也能传递。 child.component.html:

【本文地址】

今日新闻